import React, { useContext, useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Modal,
  TouchableWithoutFeedback,
} from "react-native";
import QuestionnaireContext from "../../context/questionnaire/QuestionnaireContext";
import AsyncStorage from "@react-native-async-storage/async-storage";
import ProblemContext from "../../context/questionnaire/ProblemContext";
import OpinionsContext from "../../context/questionnaire/OpinionsContext";
import SpeedContext from "../../context/questionnaire/SpeedContext";

const QuestionnaireHome = ({ navigation }) => {
  const { postNewQues, QuesData, newQues, getQues } =
    useContext(QuestionnaireContext);
  const { ProblemData, postNewPro, getProblem } = useContext(ProblemContext);
  const { GroupQuesData, getGroupQues } = useContext(OpinionsContext);
  const { SpeedData, getSpeed } = useContext(SpeedContext);

  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // postNewQues();
    // postNewPro();
    // getQues();
    // getProblem();
    // getGroupQues(1);
    getSpeed();
  }, []);

  return (
    <View style={styles.container}>
      {/* <TouchableOpacity
        style={[styles.card, { marginTop: 20 }]}
        onPress={() => navigation.navigate("问卷修改")}
      >
        <View style={styles.content}>
          <Text style={styles.title}>问卷模板</Text>
          <Text style={styles.subtitle}>Questionnaire template</Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.card, { backgroundColor: "#F47C68" }]}
        onPress={() => navigation.navigate("AdminProblem")}
      >
        <View style={styles.content}>
          <Text style={styles.title}>问题清单</Text>
          <Text style={styles.subtitle}>List of issues</Text>
        </View>
      </TouchableOpacity> */}

      <TouchableOpacity
        style={[styles.card, { backgroundColor: "#A9D67C" }]}
        onPress={() => navigation.navigate("意见反馈")}
      >
        <View style={styles.content}>
          <Text style={styles.title}>意见反馈</Text>
          <Text style={styles.subtitle}>FeedBack</Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.card, { backgroundColor: "#5ACCDA" }]}
        onPress={async () => {
          const role = await AsyncStorage.getItem("role");
          if (role === "admin") {
            navigation.navigate("进度报告");
          } else {
            navigation.navigate("PlanSpeedAuditor");
          }
        }}
      >
        <View style={styles.content}>
          <Text style={styles.title}>进度报告</Text>
          <Text style={styles.subtitle}>progress report</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    // marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "#fffafa",
    backgroundColor: "white",
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "center",
  },

  card: {
    backgroundColor: "#8ABAFF",
    // flex: 1,
    height: "22%",
    width: "90%",
    margin: 5,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 4,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "grey", // 设置阴影色
  },
  content: {
    justifyContent: "center",
    alignItems: "center",
  },

  title: {
    fontSize: 22,
    alignItems: "center",
    color: "#fff",
    marginBottom: 5,
  },
  subtitle: {
    fontSize: 16,
    alignItems: "center",
    color: "#fff",
    letterSpacing: 3,
    textTransform: "uppercase",
  },
});

export default QuestionnaireHome;
